import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import AutoRenderComponent from '@/pages/WorkFlow/components/FormControls/components/AutoRenderComponent/AutoRenderComponent';
import { withRouter } from 'umi';
import { useMount } from 'react-use';
import styles from './index.less';

/**
 * 新闻流程套件
 * 新闻导入和恢复公用这一个流程审批页面, 通过 fType(import | rollback) 来区分
 */
const NewsApply = ({ form, dataSource, formValueMap, wrapperLayout }) => {
    // location
    const { children: list } = dataSource;
    const { getFieldDecorator, setFieldsValue } = form;
    // const { id } = location.query;
    // const isConfigureStage = !formValueMap && !id; // 是否是配置节点, 配置流程预览使用. 没有任何有效数据!!!
    // const isCommitStage = !formValueMap && id; // 是否是流程提交阶段, 该阶段部分参数是通过 URL 传参过来的
    const isApprovalStage = formValueMap; // 是否是流程审批阶段
    const formData = formValueMap || {}; // 空对象是为避免空值时取值错误

    useMount(() => {
        // console.log('============>审批套件调试:dataSource', dataSource);
        // console.log('============>审批套件调试:formValueMap', formValueMap);

        // 提交阶段把 URL 的参数写进表单. (也称这为 "固化参数", 意思是当下数据状态保存下来)
        if (formValueMap) {
            setFieldsValue({
                newsContentTitle: formData.newsContentTitle,
                newsCnName: formData.newsCnName,
                newsEnName: formData.newsEnName,
                releaseTime: formData.releaseTime,
                createTime: formData.createTime,
                newsType: formData.newsType,
                ImageOssUpload_officeFile: formData.ImageOssUpload_officeFile,
                ImageOssUpload_officeResFile: formData.ImageOssUpload_officeResFile,
                newsCnContent: formData.newsCnContent,
                newsEnContent: formData.newsEnContent,
                labelCn: formData.labelCn,
                labelEn: formData.labelEn
            });
        }
    });

    const formLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 24 - 4 }
    };

    return (
        <Form {...formLayout}>
            {/* 遍历配置里面的子组件 */}
            {list?.map(item => {
                const { label, formId, rules, extra, tag } = item;
                const otherProp = {}; // 额外要注入的属性
                const { initialValue } = item;

                // 标题组件特殊处理
                if (tag === 'Title') {
                    return <AutoRenderComponent config={item} key={formId} />;
                }
                // 创建时间不可编辑
                if (formId === 'createTime' && !isApprovalStage) {
                    return null
                }
                if (formId === 'ImageOssUpload_officeResFile') {
                    otherProp.className = styles.officeResFileUpload;
                }
                // 生成内容的摘要
                if (formId === 'newsCnContent') {
                    if (isApprovalStage) {
                        otherProp.readOnly = true;
                        otherProp.disabled = false;
                        otherProp.controls = [];
                    }
                    otherProp.onBlur = editorState => {
                        setFieldsValue({
                            briefContentCn: editorState.toText().slice(0, 200)
                        });
                    };
                }
                // 生成内容的摘要
                if (formId === 'newsEnContent') {
                    if (isApprovalStage) {
                        otherProp.readOnly = true;
                        otherProp.disabled = false;
                        otherProp.controls = [];
                    }
                    otherProp.onBlur = editorState => {
                        setFieldsValue({
                            briefContentEn: editorState.toText().slice(0, 200)
                        });
                    };
                }

                return (
                    <Form.Item
                        label={label}
                        key={formId}
                        extra={extra}
                        style={{ display: item?.inRenderDom === false ? 'none' : 'block' }}
                        {...wrapperLayout}
                    >
                        {getFieldDecorator(formId, {
                            initialValue,
                            rules: isApprovalStage ? [] : rules
                        })(<AutoRenderComponent form={form} config={item} {...otherProp} />)}
                    </Form.Item>
                );
            })}
        </Form>
    );
};

NewsApply.propTypes = {
    form: PropTypes.object.isRequired,
    dataSource: PropTypes.object.isRequired, // 套件配置文件
    formValueMap: PropTypes.object // 流程开始阶段有前端组织好数据传给后端写入暂存表, 流程审批阶段通过这个参数来获取表单数据
};

NewsApply.defaultProps = {
    formValueMap: null // 提交阶段是没有值的
};

export default withRouter(NewsApply);
